<template>
    <div class="container-fluid px-0">
        <nav class="navbar navbar-dark bg-primary px-4 justify-content-between">
            <router-link class="navbar-brand" to="/">者也专栏</router-link>
            <ul v-if="!user.isLogin" class="list-inline mb-0">
                <li class="list-inline-item"><router-link to="/login"
                        class="btn btn-outline-light my-2">登陆</router-link></li>
                <li class="list-inline-item"><router-link to="/signup"
                        class="btn btn-outline-light my-2">注册</router-link></li>
            </ul>
            <ul v-else class="list-inline mb-0">
                <DropDown :title="`${user.nickName}`">
                    <DropdownItem><router-link class="dropdown-item" to="/create">新建文章</router-link></DropdownItem>
                    <DropdownItem><a class="dropdown-item" href="#">编辑资料</a></DropdownItem>
                    <DropdownItem><router-link class="dropdown-item" :to="`/column/${user.column}`">我的专栏</router-link>
                    </DropdownItem>
                    <DropdownItem><a class="dropdown-item" href="#" @click="handleLogout">退出登录</a></DropdownItem>
                </DropDown>
            </ul>
        </nav>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import DropDown from './DropDown.vue'
import DropdownItem from './DropdownItem.vue'
import { userProps } from '../store'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import CreateMessage from './CreateMessage'

export default defineComponent({
    name: 'GlobalHeader',
    components: {
        DropDown,
        DropdownItem
    },
    props: {
        user: {
            type: Object as PropType<userProps>,
            required: true
        }
    },
    setup() {
        const store = useStore()
        const router = useRouter()
        const handleLogout = () => {
            store.commit('logout')
            CreateMessage('正在跳往首页...', 'success')
            setTimeout(() => {
                router.push('/')
            }, 2000)
        }
        return {
            handleLogout
        }
    }
})
</script>
